<template>
  <item-tab title="Stock Price">
    <high-chart
      chartType="stock"
      :options="stockPriceOptions">
    </high-chart>
  </item-tab>
  <item-tab title="Candle Line">
    <high-chart
      chartType="stock"
      :options="KLineOptions">
    </high-chart>
  </item-tab>
</template>

<script>
import { defineComponent, reactive, toRef } from 'vue'
import { ajaxGet, genericError } from "@/utils/http";
import { stock_price_api } from "@/store/api";
import highChart from "@/components/highCharts/index";
import itemTab from "@/components/item-tab/index";
import axios from 'axios';
export default defineComponent({
  components: {
    itemTab,
    highChart,
  },
  setup(props, { attrs, slots, emit }) {
    const dataGroup = [
      [
        'week',
        [1]
      ],
      [
        'month',
        [1, 2, 3, 4, 6]
      ]
    ]
    const stockPriceOptions = reactive({
        rangeSelector: {
          selected: 2
        },
        title: {
          text: '平安银行历史股价'
        },
        plotOptions: {
          series: {
            showInLegend: true
          }
        },
        tooltip: {
          split: false,
          shared: true
        },
        series: [{
          id: '000001',
          name: '平安银行',
          data: [],
        }]
    })
    const KLineOptions = reactive({
      rangeSelector: {
        selected: 1,
        inputDateFormat: '%Y-%m-%d'
      },
      title: {
        text: '平安银行历史股价'
      },
      xAxis: {
        dateTimeLabelFormats: {
          millisecond: '%H:%M:%S.%L',
          second: '%H:%M:%S',
          minute: '%H:%M',
          hour: '%H:%M',
          day: '%m-%d',
          week: '%m-%d',
          month: '%y-%m',
          year: '%Y'
        }
      },
      tooltip: {
        split: false,
        shared: true,
      },
      yAxis: [{
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: '股价'
        },
        height: '65%',
        resize: {
          enabled: true
        },
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: '成交量'
        },
        top: '65%',
        height: '35%',
        offset: 0,
        lineWidth: 2
      }],
      series: [{
        type: 'candlestick',
        name: 'Price',
        color: 'green',
        lineColor: 'green',
        upColor: 'red',
        upLineColor: 'red',
        tooltip: {
        },
        navigatorOptions: {
          // color: HighCharts.getOptions().colors[0]
        },
        data: [],
        dataGrouping: {
          units: dataGroup
        },
        id: 'sz'
      },{
        name: 'Trading Volumn',
        type: 'column',
        data: [],
        yAxis: 1,
        dataGrouping: {
          units: dataGroup
        }
      }]
		})
    const stockPriceData = toRef(stockPriceOptions.series[0], 'data')
    const stockCandleData = toRef(KLineOptions.series[0], 'data')
    const stockTradingVolumn = toRef(KLineOptions.series[1], 'data')

    // const KLineData = toRef(KLineOptions.series)
    axios.get(stock_price_api).then(res => {
      const data = res.data.data
          , dataLength = data.length

      stockPriceData.value = data

      for (let i=0; i < dataLength; i++) {
				stockCandleData.value.push([
						data[i][0], // the date
						data[i][1], // open
						data[i][2], // high
						data[i][3], // low
						data[i][4] // close
				]);
				stockTradingVolumn.value.push([
						data[i][0], // the date
						data[i][5] // the volume
				]);
		  }
    })



    return {
      KLineOptions,
      stockPriceOptions,
      stockPriceData,
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
